---
type: tutorial
title: Ajouter du contenu dynamique à propos de vous
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Utilisez les variables et le rendu conditionnel sur vos pages Astro
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez un site web multi-pages avec du contenu HTML, il est temps d'ajouter un peu de HTML dynamique !

<PreCheck>
  - Définir le titre de votre page dans le frontmatter et à l'utiliser dans votre HTML
  - Afficher conditionnellement des éléments HTML
  - Ajouter des informations vous concernant
</PreCheck>

Tout fichier HTML est un langage Astro valide. Mais Astro permet bien plus que du simple HTML !

## Définir et utiliser une variable

Ouvrez `about.astro`, qui devrait ressembler à ceci :

```astro title="src/pages/about.astro"
---
---
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Accueil</a>
    <a href="/about/">À propos</a>
    <a href="/blog/">Blog</a>
    <h1>À propos de moi</h1>
    <h2>... et de mon nouveau site Astro !</h2>

    <p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p>

    <p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p>
  </body>
</html>
```

<Steps>
1. Ajoutez la ligne de code JavaScript suivante dans le script du frontmatter, entre les **délimiteurs de code**:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "À propos de moi";
    ---
    ```

2. Remplacez à la fois le titre statique « Astro » et « À propos de moi » dans votre HTML par la variable dynamique `{pageTitle}`.

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Accueil</a>
        <a href="/about/">À propos</a>
        <a href="/blog/">Blog</a>
        <h1>À propos de moi</h1>
        <h1>{pageTitle}</h1>
        <h2>... et de mon nouveau site Astro !</h2>

        <p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p>

        <p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p>
      </body>
    </html>
    ```

3. Actualisez l'aperçu en direct de votre page `/about`.

    Le texte de votre page devrait rester le même, et le titre de la page affiché dans l'onglet de votre navigateur devrait maintenant indiquer « À propos de moi » au lieu de « Astro ».

    Au lieu de saisir du texte directement dans les balises HTML, vous avez simplement **défini puis utilisé une variable** dans les deux sections de votre fichier `.astro`, respectivement.

4. Utilisez le même modèle pour créer une valeur `pageTitle` à utiliser dans `index.astro` (« Page d'accueil ») et `blog.astro` (« Mon blog d'apprentissage d'Astro »). Mettez à jour le HTML de ces pages aux deux endroits pour que le titre de la page corresponde au titre affiché sur chaque page.
</Steps>

:::note[À retenir]
- **Définissez** des variables dans votre script Astro en utilisant des expressions JavaScript ou TypeScript.
- **Utilisez** ces variables dans votre modèle Astro entre des accolades `{}` pour indiquer à Astro que vous utilisez du JavaScript.
:::

## Écrire des expressions JavaScript dans Astro

<Steps>
1. Ajoutez le code JavaScript suivant dans votre frontmatter, entre les **délimiteurs de code** :

      (Vous pouvez personnaliser le code à votre convenance, mais ce tutoriel utilisera l'exemple suivant.)

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "À propos de moi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Rédactrice technique",
      hobbies: ["photographie", "observation des oiseaux", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];
    ---
    ```

2. Ensuite, ajoutez le code suivant à votre modèle HTML, en dessous de votre contenu existant :

    ```astro title="src/pages/about.astro"
    <p>Voici quelques faits me concernant :</p>
    <ul>
      <li>Je m'appelle {identity.firstName}.</li>
      <li>Je vis au {identity.country} et je travaille en tant que {identity.occupation}.</li>
      {identity.hobbies.length >= 2 && 
        <li>Deux de mes loisirs sont : {identity.hobbies[0]} et {identity.hobbies[1]}</li>
      } 
    </ul>
    <p>Voici mes compétences :</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>
    ```
</Steps>

:::note[À retenir]
1. Rédiger un modèle Astro ressemble beaucoup à **rédiger du HTML**, mais vous pouvez inclure des expressions JavaScript à l'intérieur.
2. Le script du frontmatter d'Astro ne contient que du JavaScript.
3. Vous pouvez utiliser tous les **opérateurs logiques**, les **expressions** et les **fonctions** modernes JavaScript dans l'une ou l'autre section de votre fichier `.astro`. Mais, les accolades sont nécessaires (uniquement) dans le corps du modèle HTML.
:::

<Box icon="question-mark">

### Tester vos connaissances

1. Le frontmatter d'un fichier `.astro` est écrit en :

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. En plus du HTML, la syntaxe d'Astro vous permet d'inclure :

    <MultipleChoice>
        <Option isCorrect>Des opérateurs logiques, des expressions et des fonctions JavaScript</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. Quand devez-vous écrire votre JavaScript entre des accolades ?
    <MultipleChoice>
        <Option>
          Lorsque vous n'êtes pas sûr que ce soit correct.
        </Option>
        <Option isCorrect>
          Lorsque vous êtes à l'intérieur de la section du modèle HTML d'un composant Astro.
          </Option>
        <Option>
          Entre les délimiteurs de code dans un composant Astro.
        </Option>
    </MultipleChoice>
</Box>

## Afficher des éléments de manière conditionnelle

Vous pouvez également utiliser les variables de votre script pour choisir **d'afficher ou non** des éléments individuels dans le corps (`<body>`) de votre HTML.

<Steps>
1. Ajoutez les lignes suivantes à votre script du frontmatter pour **définir des variables** :

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "À propos de moi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Rédactrice technique",
      hobbies: ["photographie", "observation des oiseaux", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. Ajoutez ensuite les lignes suivantes en dessous de vos paragraphes existants.

    Ensuite, vérifiez l'aperçu en direct dans l'onglet de votre navigateur pour voir ce qui est affiché sur la page :

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>Je suis heureux d'apprendre Astro !</p>}

    {finished && <p>J'ai terminé ce tutoriel !</p>}

    {goal === 3 ? <p>Mon objectif est de terminer en 3 jours.</p> : <p>Mon objectif n'est pas de 3 jours.</p>}
    ```

3. Envoyez vos modifications sur GitHub avant de passer à la suite. Faites-le à chaque fois que vous souhaitez sauvegarder votre travail et mettre à jour votre site web en ligne.
</Steps>

:::tip
La syntaxe de création de modèles d'Astro est similaire à la syntaxe JSX. Si vous vous demandez comment utiliser votre script dans votre HTML, alors chercher comment cela se fait en JSX est probablement un bon point de départ !
:::



<Box icon="question-mark">

### Analyser la formule

Étant donné le script `.astro` suivant :

```astro title="src/pages/about.astro"
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "bottes";
const student = false;
---
```


Pour chaque expression du modèle Astro suivante, pouvez-vous prédire le HTML (le cas échéant !) qui sera envoyé au navigateur ? Cliquez pour révéler si vous avez raison !

1.  `<p>{operatingSystem}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2.  `{student && <p>Je suis encore à l'école.</p>}`

    <p>
      <Spoiler>Rien ne s'affichera car `student` est évalué comme faux (`false`).</Spoiler>
    </p>

3.  `<p>J'ai {quantity + 8} paires de {footwear}</p>`

    <p>
      <Spoiler>`<p>J'ai 11 paires de bottes</p>`</Spoiler>
    </p>

4.  `{operatingSystem === "MacOS" ? <p>J'utilise un Mac.</p> : <p>Je n'utilise pas un Mac.</p>}`

    <p>
      <Spoiler>`<p>Je n'utilise pas un Mac.</p>`</Spoiler>
    </p>
</Box>


<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux définir des valeurs et les utiliser dans des fichiers `.astro`.
- [ ] Je peux afficher conditionnellement des éléments HTML.
</Checklist>
</Box>


### Ressources

- [Expressions dynamiques dans Astro](/fr/reference/astro-syntax/#expressions-type-jsx)
